import React from 'react'
import { Toast, NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { Grid } from 'react-vant'
import { FriendsO, Wechat, Add, Qr } from '@react-vant/icons'
import { Tabs } from 'react-vant'
import './index.css'
function index() {
    const navigate = useNavigate()
    const items = ['首页', '预期管家']
    return (
        
        <div>
            <NavBar
                title="好孕有期"
                leftText="返回"
                onClickLeft={() => navigate(-1)}

            />

            <div className='logybox'>
                <img src="../src/assets/458.jpg" alt="" style={{ width: '100%', height: '150px' }} />
            </div>

            <div>
                <Grid>
                    <Grid.Item icon={<FriendsO />} text='咨询医生' />
                    <Grid.Item icon={<Add />} text='严选好物' />
                    <Grid.Item icon={<Wechat />} text='孕妈群' />
                    <Grid.Item icon={<Qr />} text='更多' />
                </Grid>
            </div>
            <div>
                <h2 style={{ fontSize: '20px', marginLeft: '15px', color: '#ccc' }}>找医生</h2>
            </div>
            <div className='logybox1'>
                <div className="logyboxtop">
                    <div className="logyboxleft">
                        <img className='imglefting' src="../src/assets/500.jpg" alt="" />
                    </div>
                    <div className="logyboxright" onClick={() => navigate('/academic')}>
                        <h2>张丛芝  <span className='spanrightlist'>副主任医师</span></h2><br />
                        <p>陕西省安康市妇幼保健院 妇产科</p><br />
                        <span className='spanrightlist'>擅长: 妇幼够染性疾病，宫颈疾病，子宫肌瘤，子宫内膜病变, 卵巢肿瘤等常见疾病诊疗.尤其是妇...</span><br />
                        <p>7417咨询量 <span className='spanrightlist1'>100% 好评率</span></p>
                    </div>
                </div>
                <div className="logyboxbottom">
                    <div className="logyboxleft">
                        <img className='imglefting' src="../src/assets/501.jpg" alt="" />
                    </div>
                    <div className="logyboxright">
                        <h2>潘一红  <span className='spanrightlist'>主任医师</span></h2><br />
                        <p>恩泽医院 妇科专</p><br />
                        <span className='spanrightlist'>擅长: 妇幼够染性疾病，宫颈疾病，子宫肌瘤，子宫内膜病变, 卵巢肿瘤等常见疾病诊疗.尤其是妇...</span><br />
                        <p>4 咨询量 <span className='spanrightlist1'>100% 好评率</span></p>
                    </div>
                </div>
            </div>
            <div className='logybox2'>
                <Tabs defaultActive={2}>
                    {items.map(item => (
                        <Tabs.TabPane key={item} title={`${item}`}>
                            {/* 下划线标签页 {item} */}
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
        </div>
    )
}

export default index